<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./img/icon_huaji.ico">

    <title>编辑任务</title>

    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="./css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/edit.css">

    <script src="./js/ie-emulation-modes-warning.js"></script>

</head>

<script type="text/javascript">
    function divClick() {
        var show = "";
        var apm = document.getElementsByName("item");
        for (var i = 0; i < apm.length; i++) {
            if (apm[i].checked)
                show = apm[i].value;
        }
        switch (show) {
            case 'absorption':
                document.getElementById("box1").style.display = "block";
                document.getElementById("box2").style.display = "none";
                document.getElementById("box3").style.display = "none";
                document.getElementById("box4").style.display = "none";
                document.getElementById("box5").style.display = "none";
                break;
            case 'distribution':
                document.getElementById("box1").style.display = "none";
                document.getElementById("box2").style.display = "block";
                document.getElementById("box3").style.display = "none";
                document.getElementById("box4").style.display = "none";
                document.getElementById("box5").style.display = "none";
                break;
            case 'metabolism':
                document.getElementById("box1").style.display = "none";
                document.getElementById("box2").style.display = "none";
                document.getElementById("box3").style.display = "block";
                document.getElementById("box4").style.display = "none";
                document.getElementById("box5").style.display = "none";

                break;
            case 'excretion':
                document.getElementById("box1").style.display = "none";
                document.getElementById("box2").style.display = "none";
                document.getElementById("box3").style.display = "none";
                document.getElementById("box4").style.display = "block";
                document.getElementById("box5").style.display = "none";
                break;
            case 'toxicity':
                document.getElementById("box1").style.display = "none";
                document.getElementById("box2").style.display = "none";
                document.getElementById("box3").style.display = "none";
                document.getElementById("box4").style.display = "none";
                document.getElementById("box5").style.display = "block";
                break;
            default:
                document.getElementById("box1").style.display = "block";
                document.getElementById("box2").style.display = "none";
                document.getElementById("box3").style.display = "none";
                document.getElementById("box4").style.display = "none";
                document.getElementById("box5").style.display = "none";
                break;
        }
    }  
</script>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">公司logo</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">设置</a></li>
                    <li><a href="#">简介</a></li>
                    <li><a href="#">帮助</a></li>
                    <li><a href="#">当前用户:Admin</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search...">
                </form>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li><a href="./task_list.html">任务列表 <span class="sr-only">(current)</span></a></li>
                    <li class="active"><a href="#">编辑任务</a></li>
                    <li><a href="./index.html">更改账户</a></li>
                    <li><a href="./index.html">退出系统</a></li>
                </ul>


            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

                <h2 class="sub-header">编辑任务</h2>
                <li class="list-group-item active">
                    <h2 class="panel-title">选择参数</h2>
                </li>
                <!-- fdsafsadfsda -->
                <ul class="nav nav-tabs">
                    <label for="abs" class="item_label">
                        <li role="presentation" class="active">
                            <input type="radio" value="absorption" name="item" id="abs" checked onclick="divClick();">
                            <label for="abs">吸收 Absorption</label>
                        </li>
                    </label>

                    <label for="dis" class="item_label">
                        <li role="presentation">

                            <input type="radio" value="distribution" name="item" id="dis" onclick="divClick();">
                            <label for="dis">分布 Distribution</label>

                        </li>
                    </label>
                    <label for="met" class="item_label">
                        <li role="presentation">

                            <input type="radio" value="metabolism" name="item" id="met" onclick="divClick();">
                            <label for="met">代谢 Metabolism</label>
                        </li>

                    </label>
                    <label for="exc" class="item_label">
                        <li role="presentation">

                            <input type="radio" value="excretion" name="item" id="exc" onclick="divClick();">
                            <label for="exc">排泄 Excretion</label>
                        </li>

                    </label>
                    <label for="tox" class="item_label">
                        <li role="presentation">

                            <input type="radio" value="toxicity" name="item" id="tox" onclick="divClick();">
                            <label for="tox">毒性 Toxicity</label>
                        </li>

                    </label>
                </ul>
                <!--  box1 -->
                <div class="table-responsive box_num" id="box1">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>参数</th>
                                <th>单位</th>
                                <th>风险阈值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!--  -->
                        </tbody>
                    </table>
                </div>
                <!-- box2 -->
                <div class="table-responsive box_num" id="box2">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>参数</th>
                                <th>单位</th>
                                <th>风险阈值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!--  -->
                        </tbody>
                    </table>
                </div>
                <!-- box3 -->
                <div class="table-responsive box_num" id="box3">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>参数</th>
                                <th>单位</th>
                                <th>风险阈值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!--  -->
                        </tbody>
                    </table>
                </div>
                <!-- box4 -->
                <div class="table-responsive box_num" id="box4">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>参数</th>
                                <th>单位</th>
                                <th>风险阈值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!--  -->
                        </tbody>
                    </table>
                </div>
                <!-- box5 -->
                <div class="table-responsive box_num" id="box5">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>参数</th>
                                <th>单位</th>
                                <th>风险阈值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!--  -->
                        </tbody>
                    </table>
                </div>

                <!-- button area -->
                <a href="./task_list.html"><button type="button" class="btn btn-success btn_ft_yes">编辑完成</button></a>
                <a href="javascript:location.reload();"><button type="button"
                        class="btn btn-warning btn_ft_no">取消编辑</button></a>
            </div> <!-- colsm9 finish -->
        </div> <!-- row finish -->
    </div>

    <script src="./js/data_edit.js"></script>
    <script>
        var abs_tbody = document.getElementsByTagName('tbody')[0];
        var dis_tbody = document.getElementsByTagName('tbody')[1];
        var met_tbody = document.getElementsByTagName('tbody')[2];
        var exc_tbody = document.getElementsByTagName('tbody')[3];
        var tox_tbody = document.getElementsByTagName('tbody')[4];

        function add_item_in_table(data_arr, target_tbody) {
            for (let index = 0; index < data_arr.length; index++) {
                var mod = `
                <tr>
                    <td>${index+1}</td>
                    <td>${data_arr[index].name}</td>
                    <td><input type="text" value=${data_arr[index].unit}></td>
                    <td>
                        <select name="location" id="">
                            <option value="x"> &lt; </option>
                            <option value="d"> &gt; </option>
                            <option value="x=" selected="selected"> &lt;= </option>
                            <option value="d="> &gt;= </option>
                            <option value="="> = </option>
                        </select>
                        <input class="table_input" type="text" value=${data_arr[index].scope}>
                    </td>
                </tr>
                `
                target_tbody.innerHTML += mod;
            }
        }
        add_item_in_table( data_arr_abs, abs_tbody );
        add_item_in_table( data_arr_dis, dis_tbody );
        add_item_in_table( data_arr_met, met_tbody );
        add_item_in_table( data_arr_exc, exc_tbody );
        add_item_in_table( data_arr_tox, tox_tbody );

    </script>


    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/holder.min.js"></script>
    <script src="./js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>